import BackPage from '@/components/BackPage';
import { getAllPayouts } from '@/services/payouts';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { Tooltip } from 'antd';
import moment from 'moment';
import { useCallback, useEffect, useRef, useState } from 'react';
import { STATELIST } from './constants';
import styles from './index.less';

const MoneyDetail: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const [list, setList] = useState<any[]>([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [total, setTotal] = useState(0);

  const getList = useCallback(async () => {
    try {
      const res = await getAllPayouts({ role: '1', pageIndex: currentPage });
      setTotal(res.total);
      setList(res.list);
    } catch (error) {
      console.error(error);
    }
  }, [currentPage]);

  useEffect(() => {
    getList();
  }, [getList]);

  // 分页的方法
  const handlePageChange = (page: any) => {
    setCurrentPage(page);
  };

  const columns: ProColumns<any>[] = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '金额明细编号',
      dataIndex: 'id',
      copyable: true,
      ellipsis: true,
    },
    {
      title: '进账来源',
      ellipsis: true,
      dataIndex: 'source',
      filters: true,
      onFilter: true,
      valueType: 'select',
      valueEnum: {
        all: { text: '超长'.repeat(50) },
        '1': {
          text: '商家抽成',
        },
        '2': {
          text: '买家充值',
        },
        '3': {
          text: '广告投放',
          disabled: true,
        },
      },
    },
    {
      title: '金额',
      dataIndex: 'money',
      ellipsis: true,
      render: (text, record) =>
        record.source === '1' ? (
          <Tooltip
            title={`总金额为${record.money},去除订单结束后将分给商家的80%（${
              record.money * 0.8
            }）元`}
          >
            <div key={record.id}>{`${record.money}元`}</div>
          </Tooltip>
        ) : (
          <div key={record.id}>{`${record.money}元`}</div>
        ),
    },
    {
      title: '订单生成时间',
      key: 'timeadd',
      render: (text, record) => {
        return (
          <div key={record.id}>{`${moment(Number(record.timeadd)).format(
            'YYYY-MM-DD HH:mm:ss',
          )}`}</div>
        );
      },
    },
    {
      title: '当前状态',
      ellipsis: true,
      render: (text, record) => (
        <div>
          {STATELIST.map((item: any) => {
            if (record.state === item.key) {
              return <div key={item.key}>{item.value}</div>;
            } else {
              return <></>;
            }
          })}
        </div>
      ),
    },
  ];

  return (
    <BackPage thisRoute={'/moneydetail'} lastRoute={'进账明细'}>
      <div className={styles.container}>
        <ProTable<any>
          columns={columns}
          actionRef={actionRef}
          cardBordered={false}
          dataSource={list}
          editable={{
            type: 'multiple',
          }}
          columnsState={{
            persistenceKey: 'pro-table-singe-demos',
            persistenceType: 'localStorage',
            onChange(value) {
              console.log('value: ', value);
            },
          }}
          rowKey="id"
          search={false}
          options={false}
          form={{
            // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
            syncToUrl: (values, type) => {
              if (type === 'get') {
                return {
                  ...values,
                  created_at: [values.startTime, values.endTime],
                };
              }
              return values;
            },
          }}
          pagination={{
            total,
            current: currentPage, // 当前页数
            pageSize: 10, // 每页条数
            size: 'small', // 分页的样式
            hideOnSinglePage: true, // 只有一页时是否隐藏分页器
            onChange: handlePageChange, // 分页的方法
          }}
          dateFormatter="string"
          headerTitle="进账明细"
        />
      </div>
    </BackPage>
  );
};
export default MoneyDetail;
